<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录</title>
<!-- css -->
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./css/bootstrapValidator.min.css" />
<!-- js -->
<script src="./js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/bootstrapValidator.min.js"></script>

<script type="text/javascript">
	function changeImg(node) {
		// 获取新的验证码img
		node.src = "./randomcode.jpg?time=" + new Date().getTime();
	}

	function Login() {
		var type = document.getElementById("loginForm").user_type.value;
		var user_id = document.getElementById("loginForm").user_id.value;
		var psw = document.getElementById("loginForm").password.value;
		var validatecode = document.getElementById("loginForm").validatecode.value;
		//alert(user_id.length);
		if (user_id.length == 0) {
			alert("学号/工号不能为空!");
		} else if (psw.length == 0) {
			alert("密码不能为空！");
		} else if (validatecode.length == 0) {
			alert("验证码不能为空！");
		} else {
			$.ajax({
				type:"POST",
				url:"./User/Login.do",
				data:{type:type, user_id:user_id, psw:psw, validatecode:validatecode},
				dataType:"json",
				success:function(data) {
					if(data.code=="200") {
						// 登录成功
						window.location.href = "./main.jsp";
					} else if(data.code=="401") {
						// 密码错误
						alert(data.msg);
					} else if(data.code=="402") {
						// 学号/工号错误
						alert(data.msg);
					} else if(data.code=="403") {
						// 身份出错
						alert(data.msg);
					} else if(data.code=="404") {
						// 验证码错误
						alert(data.msg);
					} else {
						// 未知错误
						alert("未知错误！");
					}
				},
				error:function() {
					alert("发送请求失败！");
				}
			});
		}
	}
</script>
</head>

<body>

	<!-- 大背景 -->
	<div class="container" align="center"
		style=" width:auto; height:768px; background-color:#BFEDEA; background-image:url(./img/bg2.png); -moz-background-size:100% 100%; background-size:100% 100%;">

		<!-- 标题 -->
		<div style="width:100%; height:3%; text-align:left;">
			<label style=" font-family:华文行楷; color:#; font-size:50px;">图书管理系统</label>
		</div>
		<!-- 左半部分图片 -->
		<div
			style=" float:left; width:50%; height:40%; margin-top:6%;background-color:#8AD6F7; background-image:url(./img/bg.png); -moz-background-size:100% 100%; background-size:100% 100%;"></div>

		<!-- 登录表单 -->
		<div style="float:right; width:48%;height:100%; font-size:16px;">
			<form style="margin-top:150px; border:1px solid;" id="loginForm">

				<table style="border-collapse:separate; border-spacing:0px 10px">
					<tbody>
						<tr>
							<td>身份</td>
							<td><input type="radio" name="user_type" value="manager"
								checked="checked" />管理员 <input type="radio" name="user_type"
								value="reader" style="margin-left:6%;" />读 &nbsp;者</td>

						</tr>
						<tr>
							<td>学号/工号</td>
							<td><input type="text" class="input-sm" name="user_id"></td>
						</tr>
						<tr>
							<td>密&nbsp;&nbsp;&nbsp;码</td>
							<td><input type="password" class="input-sm" name="password"
								placeholder="默认密码：1234"></td>
						</tr>
						<tr>
							<td>验证码</td>
							<td><input type="password" class="input-sm"
								name="validatecode"></td>
							<td><img alt="random" src="./randomcode.jpg"
								onClick="changeImg(this)" style="cursor:pointer;"></td>
						</tr>
						<tr>
							<td align="center">
								<button type="button" class="btn btn-default active"
									onclick="Login()">登&nbsp;&nbsp;&nbsp;录</button>
							</td>
							<td align="center"><button type="reset"
									class="btn  btn-default active">重&nbsp;&nbsp;&nbsp;置</button></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</div>
</body>

</html>
